<template>
  <div class="receive">
    <div class="receive_top">
      <div class="receive_top_goOnline" @click="togoonlined">
        <div class="receive_top_goOnline_title">{{ goonline }}</div>
      </div>
    </div>
    <div class="receive_middle">
      <van-tabs v-model:active="active">
        <van-tab title="抢单">
          <grabOrders />
        </van-tab>
        <van-tab title="预约">
          <div class="receive_middle_right">
            <div class="receive_middle_right_top">
              <div class="receive_middle_name">
                <div>Hello,</div>
                <div>{{ appuserInfo.name }}医生</div>
              </div>
              <div class="receive_middle_img">
                <img
                  src="https://q1.qlogo.cn/g?b=qq&nk=1848257116&s=100"
                  alt=""
                />
              </div>
            </div>
            <div class="receive_middle_right_tips">
              快来看今日的预约情况吧！
            </div>
          </div>
          <div class="receive_middle_right_intro">预约情况</div>
          <div class="receive_middle_right_address">
            <van-collapse v-model="activeNames">
              <van-collapse-item
                title="河南科技大学第一附属医院(开元校区)"
                name="1"
              >
                代码是写出来给人看的，附带能在机器上运行。
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="receive_middle_right_tag">
            <van-tag type="primary" class="doctorDetails_appoint_box" plain>
              眼科门诊
            </van-tag>
          </div>
          <div class="receive_middle_right_time">
            <div class="receive_middle_right_linuxTime">
              <liunxTime :value="values" @valueChange="recordValue" />
            </div>
          </div>
          <div class="receive_appoint_main">
            <div class="receive_appoint_main_box">
              <div class="receive_appoint_main_time">上午</div>
              <div class="receive_appoint_main_surplus">
                <div>可预约：1</div>
                <div>剩余：1</div>
              </div>
              <div class="receive_appoint_main_booking">
                <doctorBooking />
              </div>
            </div>
            <div class="receive_appoint_main_box">
              <div class="receive_appoint_main_time">下午</div>
              <div class="receive_appoint_main_surplus">
                <div>可预约：1</div>
                <div>剩余：1</div>
              </div>
              <div class="receive_appoint_main_booking">
                <doctorBooking />
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import MJCrequesting from "@/service/index.js";
import doctorBooking from "@/components/patientComponents/consultation/doctorRegistration/components/doctorBooking";
import liunxTime from "@/components/commonComponents/liunxTime.vue";
import grabOrders from "./grabOrders.vue";
export default {
  name: "receive",
  components: { grabOrders, liunxTime, doctorBooking },
  data() {
    return {
      appuserInfo:{},
      goonline: "上线",
      active: 0,
      activeNames: [],
      values: " ",
    };
  },
  created: function () {
    this.getUserInfo();
  },
  methods: {
    //获取登录时拿到的用户数据
    getUserInfo() {
      const storage = window.localStorage;
      const json = storage.getItem('appuserInfo');
      this.appuserInfo = JSON.parse(json)
      console.log(this.appuserInfo);
    },

    //该接口后端无判定条件，暂时无法使用
    async togoonlined() {
      try {
        const result = await MJCrequesting.request({
          url: "http://106.54.189.155:6768/user/updateDoctorIsOnline",
          method: "GET",
          headers: {
            "Content-Type": "none",
          },
        });
        if (result.data.msg) {
          Toast.fail("该功能后端还在调试中！");
          return;
        }
      } catch (error) {
        console.log(error);
      }
      await this.$router.push("/home/receivePatient/goonlined");
    },
    recordValue() {},
  },
};
</script>

<style lang="scss" scope>
.receive {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fafafa;
  overflow-y: scroll;
  overflow-x: hidden;
  &_appoint {
    margin: 15px 0 0 0;
    padding: 15px 20px;
    background-color: #fff;
    &_main {
      width: 100%;
      padding: 0px 20px 20px 20px;
      background-color: #fff;
      &_time {
        flex: none;
        width: 20%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 16px;
      }
      &_surplus {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        & div {
          margin: 0 10px;
        }
      }
      &_booking {
        flex: none;
        height: 100%;
        font-size: 14px;
        width: 60px;
        padding: 2px;
      }
      &_box {
        width: 100%;
        height: 50px;

        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  &_middle {
    &_img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    &_name {
      font-size: 22px;
      font-weight: 550;
    }
    &_right {
      padding: 30px 50px 5px 20px;
      height: 150px;
      background-color: #e3e7ec;
      overflow: hidden;
      &_linuxTime {
        width: 100%;
        white-space: nowrap;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
      }
      &_time {
        padding: 5px 20px;
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        height: 90px;
      }
      &_tag {
        padding: 5px 20px;
        background-color: #fff;
      }
      &_intro {
        padding: 20px;
        font-weight: 540;
        font-size: 18px;
        background-color: #fff;
      }
      &_tips {
        font-size: 14px;
        color: #c5c6d9;
        margin-top: 20px;
      }
      &_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    & .van-tab--active {
      color: #0b51ca;
    }
    & .van-tabs__line {
      background: #3072e0;
      width: 80px;
      height: 2px;
    }
  }
  &_top {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background-color: #fafafa;
    text-align: center;
    display: flex;
    justify-content: center;
    &_goOnline {
      position: relative;
      border-radius: 50%;
      width: 120px;
      margin-top: 50px;

      height: 120px;
      background-color: #c4c4c4;
      &_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-weight: 540;
      }
    }
  }
}
</style>
